<template>
	<view class="page">
		<CustomNav :isBack="true" color="#fff" :topBgColor="topBgColor" :title="title"></CustomNav>
		<image :src="cloudStorage+'/detail_bg_zl.png'" class="bg-img" mode="widthFix"></image>
		<view class="info-block">
			<LineTitle :title="title"></LineTitle>
			<view class="search-block">
				<input placeholder="请输入关键词" v-model="keyword" class="search-crl" />
				<view class="btn normal" @click="search">搜索</view>
			</view>
			<view class="info-content">
				<view class="info-item" v-for="item in searchList" :key="item.id"
					@click="navigate('/page_pack/industry/detail?name='+item.title+'&id='+item.id)">
					<view class="title">{{item.title}}</view>
					<image :src="cloudStorage+'/right.png'" class="right"></image>
				</view>
			</view>
		</view>
		<Back></Back>
	</view>
</template>

<script>
	import CustomNav from '@/components/CustomNav/CustomNav.vue'
	import LineTitle from '@/components/LineTitle/LineTitle.vue'
	import Back from '@/components/Back.vue'
	export default {
		components: {
			CustomNav,
			LineTitle,
			Back
		},
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				keyword: '',
				title: '',
				searchList: [],
				list: [
				  { id: 1, title: '全市各县市区第二产业发展情况（2024年）'},
				  { id: 33, title: '工业分类情况（2024 年）'},
				  { id: 2, title: '规上工业企业情况' },
				  { id: 3, title: '工业发展路径分析' },
				  { id: 4, title: '新材料产业分析' },
				  { id: 5, title: '建筑业发展路径分析' },
				  { id: 6, title: '新型工业化发展路径分析' },
				  { id: 7, title: '明沙窝工业园区情况' },
				  { id: 8, title: '装机容量' },
				  { id: 9, title: '能源基本情况及分类' },
				  { id: 10, title: '能源及发电情况' },
				  { id: 11, title: '新能源及装备制造情况（2024年）' },
				  // { id: 12, title: '发电装机项目情况' },
				  { id: 13, title: '330 千伏及以上电网工程建成、规划情况' },
				  { id: 14, title: '风电产业链重点企业情况' },
				  { id: 15, title: '风电主机系统各部件生产企业情况' },
				  { id: 16, title: '风电叶片、塔筒系统各部件生产企业情况' },
				  { id: 17, title: '氢能产业链生产企业情况' },
				  { id: 18, title: '光伏系统各部件生产企业情况' },
				  { id: 19, title: '储能产业链建设情况（在建）' },
				  { id: 34, title: '储能产业企业情况' },
				  { id: 20, title: '新型储能项目情况' },
				  { id: 21, title: '智慧电网产业链生产企业情况' },
				  { id: 35, title: '发电企业及项目情况对比' },
				  // { id: 22, title: '发电量统计对比分析' },
				  // { id: 23, title: '发电量、上网电量对比' },
				  { id: 24, title: '各类发电对比分析（2014-2024年）' },
				  { id: 25, title: '风电产业链' },
				  { id: 26, title: '光伏产业链' },
				  { id: 27, title: '光热产业链' },
				  { id: 28, title: '氢能产业链' },
				  { id: 29, title: '储能产业链' },
				  { id: 30, title: '智慧电网产业链' },
				  { id: 31, title: '砂石矿储量及开发利用情况' },
				  { id: 32, title: '砂石矿企业' }
				]
			}
		},
		watch: {

		},
		methods: {
			search() {
				this.searchList = this.list.filter(item => item.title.includes(this.keyword))
			}
		},
		onLoad(e) {
			this.title = e.title
			this.searchList = this.list
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		overflow: hidden;
		min-height: 100vh;
		background-color: #f8f8f8;

		.bg-img {
			width: 100%;
		}

		.info-block {
			position: relative;
			padding: 30rpx;

			.search-block {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #FFFFFF;
				border-radius: 50rpx;
				height: 80rpx;
				margin-top: 30rpx;
				padding: 0 30rpx;

				.search-crl {
					width: calc(100% - 160rpx);
				}

				.btn {
					width: 140rpx;
					height: 60rpx;
					font-size: 30rpx;
				}
			}

			.info-item {
				margin-top: 30rpx;
				width: 100%;
				height: 140rpx;
				padding: 30rpx;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #FFFFFF;

				.title {
					font-size: 32rpx;
				}

				.right {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>